<template>
  <div class="home  d-flex flex-column my-container">
    <!--    <div class="title-container" v-if="permersion.search">-->
    <!--      <div class="search-content">-->
    <!--        <el-form :model="searchModel" :inline="true">-->
    <!--          <el-form-item>-->
    <!--            <el-input v-model="searchModel.deviceName" placeholder="请输入设备名称" prefix-icon="el-icon-search"/>-->
    <!--          </el-form-item>-->
    <!--          <el-form-item>-->
    <!--            <el-input v-model="searchModel.deviceCode" placeholder="请输入设备编码" prefix-icon="el-icon-search"/>-->
    <!--          </el-form-item>-->
    <!--          <el-form-item>-->
    <!--            <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>-->
    <!--          </el-form-item>-->
    <!--        </el-form>-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="col d-flex flex-column shadow p-3 rounded-lg">
      <div class="">
        <el-form :model="searchModel" :inline="true">
          <el-form-item>
            <el-button type="success" @click="goBack">返回</el-button>
            <el-button type="success" icon="el-icon-refresh" @click="refresh">刷新</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="col d-flex over-auto">
        <el-table v-loading="tableLoading" border :data="tableData" height="100%" ref="tableRef">
          <el-table-column type="index" label="序号" width="80" align="center"/>
          <el-table-column prop="info" label="详情" align="center">
          </el-table-column>
          <el-table-column label="时间" align="center" width="300">
            <template slot-scope="{row}">
              {{ row.createTime }}
            </template>
          </el-table-column>
          <!--          <el-table-column label="操作" align="center" width="200">-->
          <!--            <template #default="{ row }">-->
          <!--              <el-button type="primary" size="mini" :disabled="row.status != 'over'" @click="handleDetail(row)">详情-->
          <!--              </el-button>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
        </el-table>
      </div>
      <pagination class="pagination" :total="count" :page.sync="page.pageIndex" :limit.sync="page.pageSize"
                  @pagination="pagination"/>
    </div>
  </div>
</template>

<script>
  import { queryDeviceGradeInitDetailPage } from "@/api/showManage/index"

  export default {
    components: {},
    data() {
      return {
        initCode: "",
        searchModel: {
          deviceName: "",
          deviceCode: ""
        },
        tableData: [],
        page: {
          pageSize: 10,
          pageIndex: 1
        },
        count: 0,
        tableLoading: false
      }
    },
    // 生命周期 - 创建完成（访问当前this实例）
    created() {
      this.initCode = this.$route.query.initCode
    },
    // 生命周期 - 挂载完成（访问DOM元素）
    mounted() {
      this.getTableList()
    },
    // 存放方法事件 - 会在数据变化时被调用
    methods: {
      async getTableList() {
        this.tableLoading = true
        const { status, success, object, message } = await queryDeviceGradeInitDetailPage({
          ...this.page,
          initCode: this.initCode
        })
        if (status == 200) {
          this.tableLoading = false
          this.tableData = object.data
          this.count = object.count
        }
      },
      pagination(pageItem) {
        // pageItem.page, pageItem.limit
        this.page.pageIndex = pageItem.page
        this.page.pageSize = pageItem.limit
        this.getTableList()
      },
      searchClick() {
        this.getTableList()
      },
      refresh() {
        this.searchModel = {
          deviceName: "",
          deviceCode: ""
        }
        this.getTableList()
      },
      goBack () {
        this.$router.go(-1)
      }
    }
  }
</script>
<style scoped lang="scss">
  .pagination {
    display: flex;
    justify-content: flex-end;
  }

  .title-container {
    display: flex;
    justify-content: flex-end;
    height: 60px;

    .search-content {
      display: flex;
    }

    .addAccount {
      margin: 10px 20px;
    }
  }
</style>
